<template>
    <div>
        <!-- 待映 -->
        <!-- 期待 -->
        <div class="con-top">
            <div class="looking">
                <div class="looking-hd">
                    近期最受期待
                </div>
                <div class="looking-bd">
                  
                    <ul class="looking-list" :style="{width:(Qidai.length*101-16)+'px'}">
                        <li v-for="item in Qidai" :key="item.id">
                            <div class="list-img">
                                <img :src="item.img" alt="图片">
                                <div class="list-like-look">
                                    <span class="num">{{item.wish}}</span>人想看
                                </div>
                            </div>
                            
                            <div class="title">{{item.nm}}</div>
                            <div class="date">{{item.comingTitle.split(" ")[0]}}</div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        
   
        <div v-for="(value,key) in daiyingList" :key="key">
            <div class="movie-date">{{key}}</div>
        
            <li class="movie-content"  v-for="ka in value" :key="ka.id">
                <div class="item-img">
                    <img :src="ka.img" alt="图片">
                </div>
                <div class="item-text">
                    <div>
                        {{ka.nm}}
                
                        <span class="dd" v-if="ka.version !=' ' && ka.version =='v2d imax'">
                            <span>2D</span>
                            IMAX    
                        </span>
                        <span class="d3" v-if="ka.version !=' ' && ka.version =='v3d'">
                           3D 
                        </span>
    
                        <button class="give" v-if="ka.preShow">点赞</button>
                        

                    </div>
                <div>
                    <span class="nums">{{ka.wish}}</span>人想看
                </div>
                <div>
                    主演：{{ka.star}}    

                </div>
                <div>
                    {{ka.rt}} 上映
    
                </div>
                </div>
                <div class="item-btn">
                    <div v-if="ka.showst === 1" class="want">想看</div>
                    <div v-if="ka.showst === 4" class="pre-sale">预售</div>
                </div>
            </li>
        </div>
    </div>
</template>

<script>
import axios from "axios";

export default {

    name: 'Daiying',
    data:function(){
        return {
            daiyingList:[],
            Qidai:[],
        }
    },
    created () {
        axios.get("/ajax/comingList?ci=57&token=&limit=10&optimus_uuid=B2691C001E0711ECA0A4A5476285CD164BF93F3057F741759683CA1F94BA6CFF&optimus_risk_level=71&optimus_code=10").then(res=>{
            // console.log(res.data.coming);
            var list = res.data.coming;
            var daiying = {};
            list.forEach((item)=> {
                item.img = item.img.replace("w.h","128.180");
                if(daiying[item.comingTitle]){
                    daiying[item.comingTitle].push(item);
                }else {
                    daiying[item.comingTitle] = [];
                    daiying[item.comingTitle].push(item);
                }
            });
           
            this.daiyingList = daiying;
            console.log(this.daiyingList);
        })
        axios.get("/ajax/mostExpected?ci=57&limit=10&offset=0&token=&optimus_uuid=B2691C001E0711ECA0A4A5476285CD164BF93F3057F741759683CA1F94BA6CFF&optimus_risk_level=71&optimus_code=10").then(res=>{
            // console.log(res.data.coming);
            res.data.coming.forEach((item)=>{
                item.img = item.img.replace("w.h","170.230");
            })
            this.Qidai = res.data.coming
        })
    },
};
</script>

<style>
.con-top {
    
    width: 100%;
    height: 216px;
    display: flex;
    border-bottom: 12px solid #f5f5f5;   
}
.con-top .looking {
    margin-left: 12px;
    box-sizing: border-box;
    width: 87.1%;
    height: 100%;
    /* border: 1px solid red; */
}
.looking .looking-hd {
    box-sizing: border-box;
    width: 100%;
    height: 40px;
    line-height: 40px;
    font-size: 14px;
    color: #333;

    /* border: 1px solid red; */
}
.looking .looking-bd {
    box-sizing: border-box;
    width: 100%;
    height:161px;
    clear: both;
    /* border: 1px solid red; */
    overflow:scroll;

}
.looking-bd .looking-list{
   clear: both;
   height: 100%;
   width: 600px;
  
}
 .looking-bd .looking-list li {
     float: left;
    box-sizing: border-box;
    width: 85px;
    height: 100%;
    /* border: 1px solid red; */
    margin-right: 16px;
 }
 .looking-list li .list-img {
     position: relative;
     box-sizing: border-box;
     width: 85px;
     height: 115px;
    /* border: 1px solid red; */
 }
.looking-list li .list-img img {
     width: 85px;
     height: 115px;
}
 .list-img .list-like-look {
   position: absolute;
   box-sizing: border-box;
    width: 100%;
    height: 16px;
  
    left: 4px;
    bottom: 2px;
    color: #faaf00;
    font-size: 11px;
    font-weight: 600;
    /* border: 1px solid red; */
}
.looking-bd .looking-list li:nth-last-child(1) {
     margin-right: 0;
     
 }
.list-img .list-like-look .num {
    font-size: 8px;
}
.title {
    line-height: 26px;
    box-sizing: border-box;
    width: 100%;
    height: 26px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    font-size: 13px;
    color: #222;
    /* border: 1px solid red; */
}
.date {
    box-sizing: border-box; 
    /* border: 1px solid red; */
    width: 100%;
    height: 16px;
    font-size: 12px;
    color: #999;

}
.movie-date {
    width: 100%;
    height: 40px;
    line-height: 40px;
}

.movie-content {
  display: flex;
  box-sizing: border-box;
  width: 100%;
  height:114px;

  /* border: 1px solid red; */
}
.movie-content .item-img {
    width: 20%;
  /* border: 1px solid red; */
  box-sizing: border-box;

}
.movie-content .item-img img{
    margin-top: 12px;
    width: 64px;
    height: 90px;
}
.movie-content .item-text{
    width: 64%;
      padding-left: 12px;
     /* border: 1px solid red; */
  box-sizing: border-box;
}
.item-text div:nth-of-type(1) {
    margin-top: 10px;
    box-sizing: border-box;
    width: 202.4px;
    max-height: 24px;
    margin-bottom: 7px;
    line-height: 24px;
    font-size: 17px;
    color: #333;
    font-weight: 700;
    overflow: hidden;

       white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.item-text div:nth-of-type(1) .dd {
    
    top: -2px;
    line-height: 12px;
    position: relative;
    margin-left: 3px;
    font-size: 1px;
    padding-left: 20px;
    font-weight: 500;
    box-sizing: border-box;
    border: 1px solid ;
    display: inline-block;
    width:55px;
    border-radius: 2px;
    height: 16px;
    line-height: 16px;
   
    background: #fff;
    color: #509fc9;
}
.item-text div:nth-of-type(1) .d3 {
    margin-left: 3px;
    box-sizing: border-box;
    /* position: absolute; */
    width: 17px;
    height: 14px;
    text-align: center;
    color: 1px solid red;
    left: -1px;
    text-align: center;
    line-height: 14px;
    font-size: 4px;
    font-weight: 500;
    background:#509fc9;
    /* background: red; */
    color: #fff;;
}
.item-text div:nth-of-type(1) .dd span {
   box-sizing: border-box;
    position: absolute;
    width: 20px;
    height: 14px;
    left: -1px;
    text-align: center;
    line-height: 14px;
    font-size: 4px;
    background:#509fc9;
    color: #fff;;
}
.item-text div:nth-of-type(1) .give {
    position: relative;
    top: -3px;
    margin-left: 3px;
    box-sizing: border-box;
    /* border: 1px solid red; */
    outline: none;
    border: 0;
    background:#faaf00;
    color: #fff;
    font-weight: 400;
    font-size: 2px;
    width: 23px;
    text-align: center;
    line-height: 16px;
    height: 16px;
}
.item-text div:nth-of-type(2){
    font-size: 13px;
    margin-top: -2px;
   
    display: inline-block;
    color: #666;
    /* border: 1px solid red; */

}
.item-text div:nth-of-type(2) .nums{
    color: #faaf00;
    font-size: 15px;
    font-weight: 600;

}
.item-text div:nth-of-type(3),
.item-text div:nth-of-type(4){
    color: #666;
    margin-top: 4px;
    height: 15px;
    line-height: 15px;
  /* border: 1px solid red; */

}
.movie-content .item-btn{
    width: 17%;
 
     /* border: 1px solid red; */
    box-sizing: border-box;
    line-height: 184px;
    text-align: center;
}
.movie-content .item-btn .want,
.movie-content .item-btn .pre-sale{
    margin-top: 43px;
    margin-left: 2px;
    width: 47px;
    height: 27px;
    line-height: 28px;
    text-align: center;
    box-sizing: border-box;
    color: #fff;
    border-radius: 4px;
    white-space: nowrap;
    font-size: 12px;
    cursor: pointer;

}
.movie-content .item-btn .want {
    background-color: #faaf00;
}
.movie-content .item-btn .pre-sale {
     background-color: #3c9fe6;
}
</style> 